<template>
	<view class="imgview" v-if="isShow">
		<image class="close-bt" src="../../static/images/common/remove-icon.png" 
		    @click="onClose"></image>
		<movable-area class="movable-area">
			<movable-view  direction="all" class="movable-view"
	            scale="true" scale-min="1" scale-max="8"
	            :scale-value="scale" @dblclick="dblclick">
				<image class="img" :src="url" ></image>
			</movable-view>
		</movable-area>
		
	</view>
</template>

<script>
	export default {
		name:"imageView",
		data() {
			return {
				isShowImage:false,
				scale:1
			};
		},
		props:{
			url:String,
			isShow:Boolean
		},
		methods:{
			dblclick() {
					if (this.scale == 10) {
							this.scale = 1;
					} else {
							this.scale = 10;
					}
			},
			onClose(){
				console.log('close')
				this.$emit('onClose')
			}
		}
	}
</script>

<style lang="scss" scoped>
.close-bt{
			position: fixed;right:10px;top:10px;
		}
		.movable-area {
			display: flex;align-items: center;justify-content: center;height: 100%; width:100%;text-align: center;
		}
		.movable-view{
			height: 100%;width:100%;position: fixed;
		}
		.imgview{
			position: fixed;top: 0;left: 0;width: 100%;height: 100%;text-align: center;background: rgba(0,0,0,0.6);z-index:1;
			.img{margin-top: 50%;z-index: 111;}
			.close-bt{position: fixed;right: 10px;top: 10px;width: 40px;height: 40px;z-index: 122;}
		}
</style>